<style type="text/css">
.title{
	width: 100%;
	background:#F0F7FF;
	color: rgba(44,57,73,1);
	font-size: 20px;
    font-weight: bold;
	height:50px;
	padding:12px;
}
.kuang{
	box-shadow: 0px 2px 8px rgba(0, 0, 0, 0.16);
	border-radius: 16px;
	width:100%; margin:0 auto;
	min-height:350px;
	margin-bottom: 50px;
}
.bgcss{
	position:absolute;
	width:100%;
	height:40px;
	background:#F0F7FF;
	top:0px;
	
}
.ui-fluid .ui-dropdown{
	width: 100%;
    margin-bottom: 15px;
}
.ui-button-primary{
	background:#E54C2A!important;
	width: 20%;
    margin: 30px auto;
    height: 60px;
    line-height: 60px;
    text-align: center;
    color: #fff;
    border-radius: 18px;
    font-size: 20px;
}
footer{
	position:absolute;
	bottom:0px;	
}
.f_title {
    width: 100%;
    height: 90px;
    line-height: 90px;
    text-align: center;
    background: #F0F7FF;
    font-size: 20px;
    font-family: Times;
    font-weight: bold;
    color: #2c3949;
    margin-top: -26px;
    /* border-radius: 16px; */
    border-top-left-radius: 16px;
    border-top-right-radius: 16px;
}
.my_xin {
    font-size: 20px;
    font-family: Arial;
    font-weight: 400;
    line-height: 30px;
    color: rgba(85,103,115,1);
}
.ui-float-label {
    display: block;
    position: relative;
    margin-top: 20px;
}
</style>
<div class="bg_bai my_po"  style="top:48%;left: 8%;width: 84%;">
            <div class="cen_center xiao_cen" style="width:85%">
                <div class="fang_left fl_l">
                    <ul class="map_ul">
                        <li class="xing"> {{currentProfile.firstName}} {{currentProfile.lastName}} </li>
                        <li class="dz"><img src="/assets/images/dz.png" alt="" >{{currentProfile.street}}</li>
                        <div class="xian"></div>
                        <li class="tel"><img src="/assets/images/m2.png" alt="">Mobile ：<span>{{currentProfile.mobile}}</span></li>
                        <li class="tel"><img src="/assets/images/m3.png" alt="">Birthday ：<span>{{currentProfile.birth}}</span></li>
                        <li class="tel"><img src="/assets/images/m4.png" alt="">Private email ：<span>{{currentProfile.email}}</span></li>
                    </ul>
                </div>
                <div class="fang_right fl_r" style="width: 45%;">
                   <div
                      *ngIf="!isEdit()&&currentProfile.user_portrait&&currentProfile.user_portrait[0]&&currentProfile.user_portrait[0].filePath"
                      class=" ui-sm-12 ui-g-nopad"
                      style="display: flex;justify-content: center;"
                    >
                      <img style="width: 70%;border-radius:25px;" [src]="currentProfile.user_portrait[0].filePath" />
                    </div>
                    <div *ngIf="isEdit()" class=" ui-sm-12">
                      <h4>{{'Photo'|translate}}</h4>
                      <small>Suggest Size: 262 * 323</small>
                      <div class="ui-g pad">
                        <img [src]="getUserPhoto()['filePath']" alt="User Photo" style="display: block; height: 150px;width: 150px;">
                      </div>
                      <div class="ui-g pad">
                        <p-fileUpload mode="basic" #fileUploaderPictures (uploadHandler)="onFileUpload('user_portrait',fileUploaderPictures,currentProfile, true)"
                          customUpload="true" [withCredentials]="true"></p-fileUpload>
                      </div>
                    </div>
                </div>
            </div>
            
        </div>
<div class=" my_po"  style="top:900px;width: 86%; left:7%">

 
  <p-panel [header]="getTitle()">
    <!-- basic -->
   <div class="kuang" style="height: 370px;">
    <div class="f_title">
      <i class="fa fa-info-circle" aria-hidden="true"></i>{{'Basic'|translate}}
      <a class="link-button" style="color: rgba(66,128,194,1);" href="mailto:info@ipanproperty.com?Subject=Profile%20change%20request%20from%20%5B{{this.currentProfile.code}}%5D" target="_top">Request Change Details</a>
    </div>
      <div class="ui-g ui-fluid pad">
        <small class="my_xin">{{getTCString()}}</small>
        <div class="ui-g-6 ui-sm-12 ui-g-nopad  ui-g-offset-6 link-button-wrap">
        </div>
      </div>
      <div class="ui-g ui-fluid " style="padding-left: 10%;padding-right: 10%;" [ngClass]="{disabledDiv: !isActiveDiv}">
          <div class="ui-g-12 ui-sm-12 ui-g-nopad"></div>
        <div class="ui-g-6 ui-sm-12 pad">
          <span class="ui-float-label">
            <input type="text" [(ngModel)]="currentProfile.firstName" pInputText>
            <label>{{'First Name'|translate}}</label>
          </span>
        </div>
        <div class="ui-g-6 ui-sm-12 pad">
          <span class="ui-float-label">
            <input type="text" [(ngModel)]="currentProfile.lastName" pInputText>
            <label>{{'Surname'|translate}}</label>
          </span>
        </div>
        <div *ngIf="isEdit()" class="ui-g-6 ui-sm-12 pad">
          <span class="ui-float-label">
            <input type="password" [(ngModel)]="currentProfile.password" pInputText>
            <label>{{'Password'|translate}}</label>
          </span>
        </div>
        <div *ngIf="isEdit()" class="ui-g-6 ui-sm-12 pad">
          <span class="ui-float-label">
            <input type="password" [(ngModel)]="currentProfile.newPasswordRepeat" pInputText>
            <label>{{'Confirm Password'|translate}}</label>
          </span>
        </div>




        <div *ngIf="currentProfile.email" class="ui-g-6 ui-sm-12 pad">
          <span class="ui-float-label">
            <input type="text" [(ngModel)]="currentProfile.email" disabled pInputText>
            <label>{{'Email'|translate}}</label>
          </span>
        </div>
        <div class="ui-g-6 ui-sm-12 pad">
          <span class="ui-float-label">
            <input type="text" [(ngModel)]="currentProfile.privateEmail" pInputText>
            <label>{{'Private Email'|translate}}</label>
          </span>
        </div>


        <div class="ui-g-6 ui-sm-12 pad">
          <span class="ui-float-label">
            <span class="ui-float-label">
              <p-calendar [(ngModel)]="currentProfile.birth" [showIcon]="true" placeholder="{{'DOB(date of birth)'|translate}}"></p-calendar>
              <label></label>
            </span>
            <!-- <input type="text" [(ngModel)]="currentProfile.age" pInputText>
            <label>Age</label> -->
          </span>
        </div>
        <div class="ui-g-6 ui-sm-12 pad">
          <span class="ui-float-label">
            <input type="text" [(ngModel)]="currentProfile.mobile" pInputText>
            <label>{{'Mobile'|translate}}</label>
          </span>
        </div>

        <div class="ui-g-6 ui-sm-12 pad" style="margin-top: 20px;">
          <p-dropdown name="sex" placeholder="{{'Sex'|translate}}" [autoWidth]="false" [options]="sexOptions" [(ngModel)]="currentProfile.sex"></p-dropdown>
        </div>
    </div>
    
     <div class="kuang" style="margin-top: 90px;">
        <div class="f_title"><i class="fa fa-info-circle" aria-hidden="true"></i>{{'Bank'|translate}}</div>
        <div style="padding-left: 10%;padding-right: 10%; width:100%;">
        <div class="ui-g-6 ui-sm-12 pad">
          <span class="ui-float-label">
            <input style="width:100%" type="text" [(ngModel)]="currentProfile.bankAcctName" pInputText>
            <label>{{'Bank Account Name'|translate}}</label>
          </span>
        </div>
        <div class="ui-g-6 ui-sm-12 pad">
          <span class="ui-float-label">
            <input style="width:100%" *ngIf="isViewMode()" type="text" readonly [ngModel]="getMaskString(currentProfile.bankAcctNo)" pInputText>
            <input style="width:100%" *ngIf="!isViewMode()" type="text" [(ngModel)]="currentProfile.bankAcctNo" pInputText>
            <label>{{'Bank Account No'|translate}}</label>
          </span>
        </div>
        <div class="ui-g-6 ui-sm-12 pad">
          <span class="ui-float-label">
            <input style="width:100%" type="text" [(ngModel)]="currentProfile.bankBSBNo" pInputText>
            <label>{{'Bank BSB No'|translate}}</label>
          </span>
        </div>
        <div class="ui-g-6 ui-sm-12 pad">
          <span class="ui-float-label">
            <input style="width:100%" type="text" [(ngModel)]="currentProfile.bankComment" pInputText>
            <label>{{'Bank Comment'|translate}}</label>
          </span>
        </div>
        <div class="ui-g-6 ui-sm-12 pad">
          <span class="ui-float-label">
            <input style="width:100%" type="text" [(ngModel)]="currentProfile.bankName" pInputText>
            <label>{{'Bank Name'|translate}}</label>
          </span>
        </div>
        <div class="ui-g-6 ui-sm-12 pad">
          <span class="ui-float-label">
            <input style="width:100%" type="text" [(ngModel)]="currentProfile.bankSwiftCode" pInputText>
            <label>{{'Bank Swift Code'|translate}}</label>
          </span>
        </div>
        </div>
     </div>


        <!-- <div *ngIf="isEdit()" class="ui-g-12 ui-sm-12 pad">
          <span class="ui-float-label">
            <p-calendar [(ngModel)]="currentProfile.createTime" [showIcon]="true" placeholder="Button"></p-calendar>
            <label>Create Time</label>
          </span>
        </div>
        <div *ngIf="isEdit()" class="ui-g-12 ui-sm-12 pad">
          <span class="ui-float-label">
            <input type="text" [(ngModel)]="currentProfile.updateTime" pInputText disabled>
            <label>Update Time</label>
          </span>
        </div> -->
      
      
    </div>

    <!-- professsional -->
   <div class="kuang" style="margin-top: 470px;"> 
    <div class="f_title">
      <i class="fa fa-user" aria-hidden="true"></i>{{'Professional'|translate}}</div>
    <div class="ui-g ui-fluid "  style="padding-left: 10%;padding-right: 10%;" [ngClass]="{disabledDiv: !isActiveDiv}">
      <div class="ui-g-6 ui-sm-12 pad">
        <span class="ui-float-label">
          <input type="text" [(ngModel)]="currentProfile.company" pInputText>
          <label>{{'Company'|translate}}</label>
        </span>
      </div>

      <div class="ui-g-6 ui-sm-12 pad">
        <span class="ui-float-label">
          <input [disabled]="!isEdit()" type="text" [(ngModel)]="currentProfile.code" pInputText>
          <label>{{'Code'|translate}}</label>
        </span>
      </div>


      <div class="ui-g-6 ui-sm-12 pad">
        <label class="ui-float-label">{{'Experience'|translate}}</label>
        <p-dropdown name="experience" [autoWidth]="false" [options]="experienceOptions" placeholder="Select" [(ngModel)]="currentProfile.experience"></p-dropdown>
      </div>
      <div *ngIf="isEdit()" class="ui-g-6 ui-sm-12 pad">
        <label class="ui-float-label">{{'Status'|translate}}</label>
        <p-dropdown name="status" [autoWidth]="false" [options]="statusOptions" placeholder="Select" [(ngModel)]="currentProfile.status"></p-dropdown>
      </div>
      <div *ngIf="isEdit()" class="ui-g-6 ui-sm-12 pad">
        <label class="ui-float-label">{{'Role'|translate}}</label>
        <p-dropdown name="role" [autoWidth]="false" [options]="roleOptions" placeholder="Select" [(ngModel)]="currentProfile.role"></p-dropdown>
      </div>
      <div class="ui-g-6 ui-sm-12 pad">
        <label class="ui-float-label">{{'Referral ID'|translate}}</label>
        <p-dropdown name="role" [autoWidth]="false" [options]="referIDOptions" placeholder="Select" [filter]="true" [(ngModel)]="currentProfile.referID"></p-dropdown>
        <!-- <span class="ui-float-label">
          <input type="text" [(ngModel)]="currentProfile.referID" pInputText>
          <label>Refer ID</label>
        </span> -->
      </div>
    </div>
    </div>

  <div class="kuang" style="margin-top: 70px; min-height: 300px;">
    <div class="f_title">
      <i class="fa fa-map" aria-hidden="true"></i>{{'Address'|translate}}</div>
    <div class="ui-g ui-fluid "  style="padding-left: 10%;padding-right: 10%;" [ngClass]="{disabledDiv: !isActiveDiv}">
      <div class="ui-g-6">
        <label class="ui-float-label" style="margin-bottom:20px;">{{'Location'|translate}}</label>
        <p-dropdown name="country" class="dropdown-style" [autoWidth]="false" placeholder="Select a Country" [options]="cdropDownOptions.countryList"
          [(ngModel)]="cdropDownSelected.countrySelected" (onChange)="onRreshDropDownOptions($event)" filter="true"></p-dropdown>
        <label class="ui-float-label" style="margin-bottom:20px;"></label>
        <p-dropdown name="city" editable="true" class="dropdown-style" [autoWidth]="false" placeholder="Select a City" [options]="cdropDownOptions.cityList"
          [(ngModel)]="cdropDownSelected.citySelected" (onChange)="onRreshDropDownOptions($event)" filter="true"></p-dropdown>
      </div>
      <div class="ui-g-6 ui-sm-12" style=" margin-top:60px;">
        <p-dropdown name="state" class="dropdown-style" [autoWidth]="false" placeholder="Select a State" [options]="cdropDownOptions.stateList"
          [(ngModel)]="cdropDownSelected.stateSelected" (onChange)="onRreshDropDownOptions($event)" filter="true"></p-dropdown>
        <span class="ui-float-label">
          <input type="text" [(ngModel)]="currentProfile.street" pInputText>
          <label>{{'Street Address'|translate}}</label>
        </span>
      </div>

    </div>

    <!-- attachment -->
    <h4 *ngIf="isEdit()">
      <i class="fa fa-paperclip" aria-hidden="true"></i>{{'Attachment'|translate}}</h4>
    <div *ngIf="isEdit()" class="ui-g ui-fluid " [ngClass]="{disabledDiv: !isActiveDiv}">
      <div class="ui-g-12">
        <div *ngFor="let attachment of currentProfile['user_attachments']">
          <p-button (onClick)="onDeleteFile(attachment)" icon="fa fa-trash" iconPos="left" styleClass="ui-button-danger"></p-button>
          <a [href]="attachment.filePath" target="_blank" download>{{attachment.originalFilename}}</a>
        </div>
      </div>
      <p-fileUpload #fileUploaderAttachment (uploadHandler)="onFileUpload('user_attachments',fileUploaderAttachment, currentProfile)"
        customUpload="true" [withCredentials]="true" multiple="multiple"></p-fileUpload>
    </div>
    
  </div>

    <p-footer>
      <div [ngClass]="{disabledDiv: !isActiveDiv}" style="text-align:center; margin-bottom:25px;">
        <span [ngSwitch]="getCRUD()" style="padding-left:20px">
          <p *ngSwitchCase="'create'">
            <button pButton label="{{'CREATE'|translate}}" (click)="addProfile()" type="button"  class="ui-button-primary"></button>
          </p>
          <p *ngSwitchCase="'edit'">
            <button pButton label="{{'SAVE'|translate}}" (click)="updateProfile()" type="button" class="ui-button-primary"></button>
          </p>
        </span>
      </div>
    </p-footer>
  </p-panel>

</div>

<p-growl [(value)]="msgs"></p-growl>
<div style="width:100%; height:2250px;"></div>